<template>
  <div class="order-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="openAdd"
        >添加视频</el-button
      >
    </el-row>
    <el-row class="table-container">
      <Table
        @sizeChange="sizeChange"
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :showDetailBtn="false"
        :pagination="pagination"
        @currentPage="goCurrent"
        @modify="openEdit"
        @delete="onDel"
      >
      </Table>
    </el-row>
    <!-- 添加、编辑视频 -->
    <el-dialog :visible.sync="showDialog" :title="dialogTitle">
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        style="height: 100%"
      >
        <el-form-item
          label="视频名称："
          prop="name"
          :rules="[{ required: true, message: '视频名称不能为空' }]"
        >
          <el-input
            style="width: 400px"
            v-model="form.name"
            placeholder="请输入视频名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="视频类型："
          prop="type"
          :rules="[{ required: true, message: '视频类型不能为空' }]"
        >
          <el-input
            style="width: 400px"
            v-model="form.type"
            placeholder="请输入视频类型"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="视频链接："
          prop="url"
          :rules="[{ required: true, message: '视频链接不能为空' }]"
        >
          <el-input
            style="width: 400px"
            v-model="form.url"
            placeholder="请输入视频链接"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import { Message } from "element-ui";
import Upload from "@/components/UploadFile";
import Table from "@/components/Table";
import { getList, delItem, add, update, getDetail } from "@/api/video";
import { pagination, page } from "@/utils/enumConfig";

export default {
  name: "Video",
  components: {
    normalFilter,
    Table,
    Upload
  },
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "name",
          title: "视频名称",
          placeholder: "请输入",
          width: 250
        },
        {
          type: "input",
          id: "type",
          title: "视频类型",
          placeholder: "请输入",
          width: 250
        }
      ],
      onFilterChange: value => {
        this.filterParam = value;
        this.getList({
          ...value,
          ...page
        });
      }
    };
    const columnProps = [
      {
        title: "视频名称",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "视频类型",
        dataIndex: "type",
        key: "type"
      },
      {
        title: "视频链接",
        dataIndex: "url",
        key: "url"
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
        width: 200
      }
    ];
    return {
      showDialog: false,
      dialogTitle: "",
      form: {
        id: "",
        name: "",
        type: "",
        url: ""
      },
      loading: false,
      showImportModal: false,
      filterProps,
      columnProps,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      filterParam: null,
      show: false,
      curItem: {},
      file: null
    };
  },
  async created() {
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex
    };
    this.getList(param);
  },
  methods: {
    addContent() {
      this.$router.push("/order/add");
    },
    goCurrent(currentIndex) {
      console.log(currentIndex);
      let { pageSize, pageIndex } = this.pagination;
      let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
      this.getList(param);
    },
    async getList(param) {
      let { records, size, total, current } = await getList(param),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current
      };
      this.tableData = records;
    },
    openAdd() {
      this.dialogTitle = "添加视频";
      if (this.$refs.form) {
        this.$refs.form.resetFields();
        this.form = {
          id: "",
          name: "",
          type: "",
          url: ""
        };
      }
      this.showDialog = true;
    },
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
    async openEdit({ id }) {
      this.dialogTitle = "编辑视频";
      this.form = await getDetail({ id: id });
      this.showDialog = true;
    },
    goDetail({ id }) {
      this.$router.push(`/order/detail/${id}`);
    },
    async onDel({ id }) {
      let res = await delItem({ id });
      if (res.code === 1) {
        let { pageIndex } = this.pagination;
        Message.success("删除成功！");
        this.getList({
          ...this.filterParam,
          current: 1
        });
      }
    },
    async _submitData(params) {
      let res = !this.form.id ? await add(params) : await update(params);
      if (res && res.code === 1) {
        Message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000
        });
        this.getList();
        this.showDialog = false;
      }
    },
    async onSubmit() {
      const { validate } = this.$refs["form"];
      validate(valid => {
        if (valid) {
          this._submitData(this.form);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.order-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .table-container {
    margin-top: 20px;
  }
  .send-btn {
    margin: 10px 0;
  }
}
</style>
